<template>
  <div>
    <el-button type="primary" round @click="addTradeMark">添加</el-button>
    <el-card>
      <div slot="header">
        <el-table :data="infoList" style="width: 100%" border>
          <el-table-column align="center" prop="id" label="序号" />
          <el-table-column align="center" prop="title" label="标题" />
          <el-table-column prop="time" label="创建时间" width="300" />
          <el-table-column
            align="center"
            prop="imgurl"
            label="图片"
            width="200"
          >
            <template slot-scope="{ row, index }">
              <img
                :src="row.imgurl"
                alt=""
                style="width: 100px"
                height="100px"
              />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="220">
            <template slot-scope="{ row, index }">
              <el-popconfirm
                :title="`这是一段内容确定删除吗${row.title}`"
                icon="el-icon-delete"
                @onConfirm="removeInformation(row)"
              >
                <!-- onConfirm 之前的低版本要加on  现在不用了 -->
                <el-button slot="reference" type="danger" size="mini" round
                  >删除</el-button
                >
                <!--  slot="reference" 触发显示的html元素 -->
              </el-popconfirm>
              <el-button type="info" round size="mini" @click="showInfo(row.id)"
                >查看</el-button
              >
              <el-button
                type="primary"
                round
                size="mini"
                @click.stop="updateInfo(row)"
                >编辑</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <!-- 修改 -->
    <el-dialog title="修改新闻" :visible.sync="dialogFormVisible">
      <el-form style="width: 80%" :model="tmForm">
        <el-form-item label="标题" label-width="80px" prop="tmName">
          <el-input v-model="tmForm.title" autocomplete="off" />
        </el-form-item>
        <el-form-item label="新闻图片" prop="logoUrl">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-remove="handleRemove"
            :on-success="handlerSuccess"

          >
            <i class="el-icon-plus" />
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addOrUpdateTradeMark"
          >确 定</el-button
        >
      </div>
    </el-dialog>

    <!-- 添加人物信息 -->
    <el-dialog title="添加新闻" :visible.sync="dialogFormVisible1">
      <el-form style="width: 80%" :model="tmForm1">
        <el-form-item label="标题" label-width="80px" prop="tmName">
          <el-input v-model="tmForm1.title" autocomplete="off" />
        </el-form-item>
        <el-form-item label="新闻图片" prop="logoUrl">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-remove="handleRemove1"
            :on-success="handlerSuccess1"
          >
            <i class="el-icon-plus" />
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="addinfo">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getInfo, setInfo, modifyInfo, deleteInfo } from "@/api/Person";
export default {
  name: "Personal",
  data() {
    return {
      infoList: [], // 人物对象
      information: false, // 弹出框
      title: "",
      dialogVisible: false,
      dialogFormVisible: false, // 弹出框
      dialogFormVisible1: false, // 弹出框
      // 修改
      tmForm: {
        title: "",
        logoUrl: "",
        id: "",
      },
      // 添加
      tmForm1: {
        title: "",
        logoUrl: "",
        id: "",
      },
      disabled: false,
    };
  },
  computed: {},
  mounted() {
    this.getinfo();
  },
  methods: {
    showInfo(id) {
      this.$alert("功能待开发", "标题", {
        confirmButtonText: "确定",
      });
    },
    // 获取用户信息对象
    async getinfo() {
      const result = await getInfo();
      if (result.code == 200) {
        console.log(result);
        this.infoList = result.data.ret;
        this.title = result.data.ret.title;
      } else {
        console.log("获取信息失败");
      }
    },
    // 添加人物信息
    addTradeMark() {
      // 要在添加之前,把上一次的图片和文字信息清空

      this.tmForm1 = { title: "", logoUrl: "" };
      this.dialogFormVisible1 = true;
    },
    // 添加人物信息的回调
    async addinfo() {
      const { title } = this.tmForm1;
      const imgUrl = this.tmForm1.logoUrl;
      const result = await setInfo({ title: title, imgurl: imgUrl });
      if (result.code == 200) {
        console.log(1);
        this.$message.success("添加成功");
        this.dialogFormVisible1 = false;
      }
      this.getinfo();
    },
    handleRemove1(file, fileList) {
      console.log(file, fileList);
    },
    // 图片上传成功的回调
    handlerSuccess1(res, file, fileList) {
      console.log(file);
      this.tmForm1.logoUrl = file.url;
    },

    // 修改
    // 点击对话框中的确定按钮  发送请求的函数
    addOrUpdateTradeMark() {
      const { title, id } = this.tmForm;
      const imgUrl = this.tmForm.logoUrl;
      modifyInfo({
        title: title,
        id: id,
        imgurl: imgUrl,
      }).then((res) => {
        console.log(res);
        if (res.code === "200") {
          this.$message.success("修改成功");
          this.dialogFormVisible = false;
          this.getinfo();
        }
      });
    },
     // 删除图片的回调
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    // 图片上传成功的回调
    handlerSuccess(res, file, fileList) {
      console.log(file);
      this.tmForm.logoUrl = file.url;
    },
    // 修改的逻辑
    async updateInfo({ title, id,logoUrl }) {
      this.dialogFormVisible = true;
      this.tmForm.title = title;
      this.tmForm.logoUrl = logoUrl;
 
      let result = await modifyInfo(title, id);
      console.log(1);
      this.tmForm.id = id;
      // const result = await modifyInfo(title, id)
      console.log(id);
    },
    // 删除的回调
    async removeInformation({ id }) {
      console.log(id);
      const result = await deleteInfo(id);
      console.log(result);
      this.getinfo();
    },
  },
};
</script>

<style>
</style>
